<template>
    <div>
        <div class="loginbg">
        <img :src="imgUrl" ref="img" >
    </div>
    <div class="loginbox">
        <h1>注册</h1>
        <el-alert
            :title="alert_message"
            :type="alert_type"
            v-show="alert_is_show">
        </el-alert>
        <p><i><img src="../assets/enroll/账号.png" class="icon"></i><input type="text" v-model="enroll_form.username" ></p>
        <p><i><img src="../assets/enroll/密码.png" class="icon"></i><input type="text" v-model="enroll_form.password" ></p>
        <div class="loginButton" @click="enroll">注册</div>
        <div class="loginButton" @click="return_login_html">返回登录页面</div>
    </div>
    </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name:'enroll',
    data(){
        return{
            enroll_form:{
                username:'',
                password:''
            },
            alert_is_show:false,
            alert_message:'',
            alert_type:'success'
        }
    },
    methods:{
        enroll(){
            console.log('注册');
            this.$http.get('/api/EnrollServlet',{
                params:{
                username:this.enroll_form.username,
                password:this.enroll_form.password,
            }
            }).then(
                response=> {
                    console.log(response)
                    if(response.data.add_user==1){
                        this.alert_is_show = true
                        this.alert_message = '注册成功'
                        this.alert_type = 'success'
                        setTimeout(() => {
                            this.alert_is_show = false
                        }, 2000);
                    }else if(response.data.repeat==1){
                        this.alert_is_show = true
                        this.alert_message = '用户名已存在'
                        this.alert_type = 'error'
                        setTimeout(() => {
                            this.alert_is_show = false
                        }, 2000);
                    }else{
                        this.alert_is_show = true
                        this.alert_message = '注册失败'
                        this.alert_type = 'error'
                        setTimeout(() => {
                            this.alert_is_show = false
                        }, 2000);
                    }
                },
                err=> {
                console.log(err)
                }   
            )
        },
        return_login_html(){
        console.log("return_login_html");
        this.$router.push({name: 'Login'});
      }
    },
    setup(){
        let timer;
        let imgUrl = ref(require('../assets/background/preview1.jpg'));
        let index = 1;
        // 开启定时器轮播背景图片
        function setTimer(){
            this.timer = setInterval(()=>{
                this.$refs.img.style.opacity = 1;
                index = index < 3?index+1:1;
                this.imgUrl = require(`../assets/background/preview${index}.jpg`);
                setTimeout(() => {
                    this.$refs.img.style.opacity = 0.5;
                }, 4000);
            },5000);
            setTimeout(() => {
                this.$refs.img.style.opacity = 0.5;
            }, 4000);
        }
        // 登录回调
        function login(){
            alert('注册成功')
        }
        return{
            imgUrl,
            setTimer,
            login
        }
    },
    mounted() {
        this.setTimer();        
    },
}
</script>

<style>
    body{
        margin: 0;
    }
    .loginbg{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 0;
    }
    .loginbg img{
        width: 100%;
        transition: 1.5s all;
    }
    .loginbox{
        width: 500px;
        height: 400px;
        border:1px solid #2b2b2b;
        border-radius: 10px;
        box-shadow: 0 0 20px 20px #00000030;
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        margin: auto auto;
    }
    .loginbox h1{
        text-align: center;
        color: #fff;
        font-family: "Arial";
    }
    .loginbox p{
        font-size: 18px;
        display: block;
        width: 380px;
        margin: 20px auto;
    }
    .loginbox i{
        display: inline-block;
        width: 25px;
        height: 25px;
        padding-top: 5px;
    }
    .icon{
        width: 25px;
    }
    .loginbox input{
        width: 335px;
        font-size: 25px;
        font-weight: bolder;
        line-height: center;
        margin-bottom: 5px;
        margin-left: 8px;
        background: #ffffff00;
        border: none;
        border-bottom:2px solid #000;
        color:#D7DDE8;
    }
    .loginbox input:focus{
        outline: none;
    }
    .loginButton{
        width: 200px;
        height: 40px;
        margin: 30px auto;
        text-align: center;
        line-height: 40px;
        background: #fff;
        cursor: pointer;
        border-radius: 10px;
    }
    .loginButton:hover{
        box-shadow: 0 0 10px 10px #00000020;
    }
</style>